<template>
  <div id='temp'>
    <div class="stuInfo">
      <div class="tit">
        <span>试题详情</span>
      </div>
      <el-row>
        <el-col :span="8">
          <div>
            <el-col :span="10">
              <span class="left">课程代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.courseid}}</span>
            </el-col>
          </div>
          <!-- <div>
            <el-col :span="10">
              <span class="left">部门代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right"></span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">科目代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right"></span>
            </el-col>
          </div> -->
          <div>
            <el-col :span="10">
              <span class="left">章：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.chapter}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">顺序代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.sequence}}</span>
            </el-col>
          </div>
        </el-col>
        <el-col :span="8">
          <!-- <div>
            <el-col :span="10">
              <span class="left">客户代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right"></span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">级别代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right"></span>
            </el-col>
          </div> -->
          <div>
            <el-col :span="10">
              <span class="left">语言代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.language}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">节：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.section}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">错题率：</span>
            </el-col>
            <el-col :span="14">
              <span class="right"></span>
            </el-col>
          </div>
        </el-col>
        <el-col :span="8">
          <!-- <div>
            <el-col :span="10">
              <span class="left">等级代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right"></span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">职能代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right"></span>
            </el-col>
          </div> -->
          <div>
            <el-col :span="10">
              <span class="left">形式代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.type}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">难度代码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.difficulty}}</span>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="questionInfo">
      <div v-show="this.info.type==1">
        <el-form>
          <el-form-item label="题干" label-width="80px">
            <div id="editorElem1"></div>
          </el-form-item>
          <el-form-item label="选项A" label-width="80px">
            <div id="editorElem2"></div>
          </el-form-item>
          <el-form-item label="选项B" label-width="80px">
            <div id="editorElem3"></div>
          </el-form-item>
          <el-form-item label="选项C" label-width="80px">
            <div id="editorElem4"></div>
          </el-form-item>
          <el-form-item label="选项D" label-width="80px">
            <div id="editorElem5"></div>
          </el-form-item>
          <el-form-item label="参考答案" label-width="80px">
            <el-radio-group v-model="answer">
              <el-radio label="A"></el-radio>
              <el-radio label="B"></el-radio>
              <el-radio label="C"></el-radio>
              <el-radio label="D"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="this.info.type==2">
        <el-form>
          <el-form-item label="题干" label-width="80px">
            <div id="editorElem6"></div>
          </el-form-item>
          <el-form-item label="参考答案" label-width="80px">
            <el-radio-group v-model="answer">
              <el-radio label="对"></el-radio>
              <el-radio label="错"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="this.info.type==3">
        <el-form>
          <el-form-item label="题干" label-width="80px">
            <div id="editorElem7"></div>
          </el-form-item>
          <el-form-item label="参考答案" label-width="80px">
            <div id="editorElem8"></div>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="this.info.type==4">
        <el-form>
          <el-form-item label="题干" label-width="80px">
            <div id="editorElem9"></div>
          </el-form-item>
          <el-form-item label="参考答案" label-width="80px">
            <div id="editorElem10"></div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="subBtn">
      <el-button type="primary" @click="subEdit">提交</el-button>
    </div>
  </div>
</template>
<script>
import "../../assets/css/info.css";
import Editor from "wangeditor";

export default {
  data() {
    return {
      form: [],
      fileList: [],
      id: "",
      editor: {},
      answer: "",
      info: {}
    };
  },
  methods: {
    getInfo() {
      let data = {
        id: this.id
      };
      this.apiPost("Train/questionDetail", data).then(res => {
        this.info = res;
        if (res.type == 1) {
          this.editor.editor1.txt.html(res.question);
          this.editor.editor2.txt.html(res.a);
          this.editor.editor3.txt.html(res.b);
          this.editor.editor4.txt.html(res.c);
          this.editor.editor5.txt.html(res.d);
          this.answer = res.answer;
        } else if (res.type == 2) {
          this.editor.editor6.txt.html(res.question);
          this.answer = res.answer;
        } else if (res.type == 3) {
          this.editor.editor7.txt.html(res.question);
          this.editor.editor8.txt.html(res.answer);
        } else if (res.type == 4) {
          this.editor.editor9.txt.html(res.question);
          this.editor.editor10.txt.html(res.answer);
        }
      });
    },
    subEdit() {
      let data = _g.cloneJson(this.info);
      if (this.info.type == 1) {
        data.question = this.editor.editor1.txt.html();
        data.a = this.editor.editor2.txt.html();
        data.b = this.editor.editor3.txt.html();
        data.c = this.editor.editor4.txt.html();
        data.d = this.editor.editor5.txt.html();
        data.answer = this.answer;
      } else if (this.info.type == 2) {
        data.question = this.editor.editor6.txt.html();
        data.answer = this.answer;
      } else if (this.info.type == 3) {
        data.question = this.editor.editor7.txt.html();
        data.answer = this.editor.editor8.txt.html();
      } else if (this.info.type == 4) {
        data.question = this.editor.editor9.txt.html();
        data.answer = this.editor.editor10.txt.html();
      }
      this.apiPost('Train/questionEdit',data).then(res=>{
        let type = res.error?'error':'success';
        _g.toastMsg(type, res.msg);
        this.getInfo();
      })
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getInfo();
  },
  mounted() {
    // 富文本编辑框
    for (var i = 1; i < 11; i++) {
      this.editor["editor" + i] = new Editor("#editorElem" + i);
      this.editor["editor" + i].customConfig.uploadImgServer =
        PATH + "System/upload";
      this.editor["editor" + i].customConfig.uploadFileName = "file[]";
      this.editor["editor" + i].customConfig.customAlert = function(info) {
        this.$message.error("图片上传失败！");
      };
      this.editor["editor" + i].create();
      this.editor["editor" + i].$textContainerElem[0].style.height = "152px";
      this.editor["editor" + i].$textContainerElem[0].style.width = "700px";
      this.editor["editor" + i].$toolbarElem[0].style.width = "700px";
    }
  }
};
</script>
<style lang="css" scoped>
.upload-demo {
  margin: 10px 0;
}

.questionInfo {
  width: 800px;
  margin: 30px auto;
}

.subBtn {
  text-align: center;
  padding-bottom: 50px;
}
</style>
